<template>
  <view class="diagram-container">
    <!-- 顶部导航栏 -->
    <view class="navbar">
      <view class="nav-left" @click="goBack">
        <text class="back-icon">←</text>
        <text>返回</text>
      </view>
      <text class="title">主接线图</text>
      <view class="nav-right"></view>
    </view>
    
    <!-- 设备信息展示 -->
    <view class="device-info" v-if="productDetail">
      <view class="info-item">
        <text class="info-label">出线：</text>
        <text class="info-value">{{ productDetail.lineNum || 0 }}路</text>
      </view>
      <view class="info-item">
        <text class="info-label">设备：</text>
        <text class="info-value">{{ productDetail.deviceId || '未设置' }}</text>
      </view>
    </view>

    <!-- 主要内容区域 -->
    <view class="main-content">
      <!-- SVG容器 - 包含工具栏 -->
      <view class="svg-full-container">
        <!-- SVG工具栏 - 透明背景 -->
        <view class="svg-toolbar-transparent" v-if="svgContent">
          <view class="toolbar-group">
            <view class="zoom-controls">
              <button class="zoom-btn zoom-in-btn" @click="zoomIn">
                <text class="icon-plus">+</text>
              </button>
              <button class="zoom-btn zoom-out-btn" @click="zoomOut">
                <text class="icon-minus">-</text>
              </button>
              <button class="zoom-btn reset-btn" @click="resetZoom">
                <text class="icon-reset">↺</text>
              </button>
              <!-- 在现有的工具栏按钮后面添加 -->
              <button class="zoom-btn fit-btn" @click="autoFitSvg">
                <text class="icon-fit">FIT</text>
              </button>
              <!-- 新增：逆时针旋转90度按钮 -->
              <button class="zoom-btn rotate-left-btn" @click="rotateLeft">
                <text class="icon-rotate">↶</text>
              </button>
            </view>
            <text class="zoom-text">{{ Math.round(scale * 100) }}%</text>
          </view>
        </view>
        
        <!-- SVG内容区域 -->
        <scroll-view 
          class="svg-scroll-container" 
          scroll-x="true" 
          scroll-y="true"
          :scroll-top="scrollTop"
          :scroll-left="scrollLeft"
          @scroll="onScroll"
        >
          <view 
            class="svg-content-wrapper"
            :style="{
              width: '100%',
              height: '100%',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              backgroundColor: '#000000'
            }"
          >
            <!-- 更新时间显示 - 右上角 -->
            <view v-if="latestUpdateTime" class="update-time-display">
              <text class="update-time-label">更新时间:</text>
              <text class="update-time-value">{{ latestUpdateTime }}</text>
            </view>
            
            <!-- 动态加载的 SVG 内容 - 直接渲染SVG -->
            <view 
              v-if="svgContent" 
              class="dynamic-svg-container"
              id="svgContainer"
              :style="{ 
                width: (svgWidth ? svgWidth + 'px' : 'auto'),
                height: (svgHeight ? svgHeight + 'px' : 'auto'),
                maxWidth: '100%',
                maxHeight: '100%',
                transform: `scale(${scale}) rotate(${rotationDeg}deg)`,
                transformOrigin: 'center center',
                display: 'inline-block'
              }"
              v-html="svgContent"
            ></view>

            <!-- 加载中状态 -->
            <view v-else-if="loadingSvg" class="loading-svg">
              <view class="loading-spinner"></view>
              <text class="loading-text">正在加载SVG...</text>
            </view>

            <!-- 默认占位图 -->
            <view v-else class="default-svg">
              <svg width="800" height="300" viewBox="0 0 800 300" xmlns="http://www.www.w3.org/2000/svg">
                <rect x="300" y="100" width="200" height="100" fill="#4A90E2" stroke="#2C5AA0" stroke-width="2" rx="5"/>
                <text x="400" y="160" text-anchor="middle" fill="white" font-size="16" font-family="Arial">主变压器</text>
                <line x1="150" y1="150" x2="300" y2="150" stroke="#FF6B6B" stroke-width="4"/>
                <circle cx="150" cy="150" r="8" fill="#FF6B6B"/>
                <text x="150" y="130" text-anchor="middle" fill="#FF6B6B" font-size="14" font-family="Arial">进线</text>
                <line x1="500" y1="150" x2="650" y2="150" stroke="#51CF66" stroke-width="4"/>
                <circle cx="650" cy="150" r="8" fill="#51CF66"/>
                <text x="650" y="130" text-anchor="middle" fill="#51CF66" font-size="14" font-family="Arial">出线</text>
              </svg>
              <text class="no-data-text">暂无主接线图数据</text>
            </view>
          </view>
        </scroll-view>
      </view>

      <!-- 底部按钮区域 -->
      <view class="bottom-section">
        <button class="image-button" @click="showImagePreview(productDetail.image1Url)">
          现场图1
        </button>
        <button class="image-button" @click="showImagePreview(productDetail.image2Url)">
          现场图2
        </button>
      </view>
    </view>

    <!-- 图片预览弹窗 -->
    <view class="preview-modal" v-if="showPreview" @click="closePreview">
      <view class="preview-content" @click.stop>
        <image :src="previewImage" mode="aspectFit" class="preview-image"></image>
        <button class="close-btn" @click="closePreview">关闭</button>
      </view>
    </view>
  </view>
</template>

<script>
// 引入配置文件
import config from '../../config/index.js'
export default {
  data() {
    return {
      productSNo: '',
      productDetail: {
        image1Url: '',
        image2Url: ''
      },
      showPreview: false,
      previewImage: '',
      loading: false,
      loadingSvg: false,
      svgBase64Content: '', // 存储原始的Base64内容
      svgContent: '', // 存储解码后的SVG内容
      scale: 1, // 缩放比例
      scrollTop: 0,
      scrollLeft: 0,
      svgWidth: 1200, // SVG原始宽度
      svgHeight: 400, // SVG原始高度
      containerWidth: 300, // 容器宽度，默认值
      containerHeight: 200, // 容器高度，默认值
      lastScrollTime: 0,
      rotated: true, // 标记是否旋转
      rotationDeg: 90, // 初始顺时针90度；每次点击逆时针-90
      
      // 新增：数据绑定相关
      aiDataTimer: null,
      diDataTimer: null,
      aiDataList: [], // AI数据列表
      diDataList: [], // DI数据列表
      svgUpdated: false, // 标记SVG是否已更新
      
      // 新增：记录已缩放字体的元素，避免重复缩小
      fontScaledIds: {},
      
      // 新增：最新更新时间
      latestUpdateTime: ''
    };
  },

  onLoad(options) {
    console.log('主接线图页面参数:', options);
    if (options && options.productSNo) {
      this.productSNo = decodeURIComponent(options.productSNo);
      console.log('产品序列号:', this.productSNo);
      this.loadProductDetail();
      this.loadSvgData();
    }
  },

  onReady() {
    // 页面准备完成后获取容器实际宽度
    this.$nextTick(() => {
      this.getContainerWidth();
    });
  },

  // 新增：页面显示时开始数据轮询
  onShow() {
    this.startDataPolling();
  },

  // 新增：页面隐藏时停止数据轮询
  onHide() {
    this.stopDataPolling();
  },

  // 新增：页面卸载时清理定时器
  onUnload() {
    this.stopDataPolling();
  },

  methods: {
    goBack() {
      uni.navigateBack();
    },

    // 自动缩放SVG到合适大小
    autoFitSvg() {
      if (!this.svgWidth || !this.svgHeight || !this.containerWidth) {
        console.log('尺寸信息不完整，无法自动缩放');
        return;
      }

      const query = uni.createSelectorQuery();
      query.select('.svg-scroll-container').boundingClientRect(res => {
        if (res) {
          // 几乎没有padding，最大化利用空间
          const containerHeight = res.height - 10;
          const containerWidth = res.width - 10;
          
          // 计算需要的缩放比例来填满容器
          const scaleX = containerWidth / this.svgWidth;
          const scaleY = containerHeight / this.svgHeight;
          
          // 选择较大的缩放比例（可能会裁剪一部分，但更符合你的需求）
          let newScale = Math.max(scaleX, scaleY);
          
          // 可以进一步放大一些
          newScale = newScale * 0.44; // 再放大10%
          
          // 设置合理的缩放范围
          this.scale = Math.max(1.0, Math.min(5, newScale));
          
          // 重置滚动位置到中心
          this.$nextTick(() => {
            this.scrollTop = 0;
            this.scrollLeft = 0;
          });
          
          console.log('最大化填充 - 缩放比例:', this.scale);
        }
      }).exec();
    },

    // 获取容器实际尺寸
    getContainerWidth() {
      const query = uni.createSelectorQuery();
      query.select('.svg-scroll-container').boundingClientRect(res => {
        if (res) {
          this.containerWidth = Math.max(0, (res.width || 0) - 40); // 减去padding
          this.containerHeight = Math.max(0, (res.height || 0) - 40);
          console.log('容器尺寸:', this.containerWidth, this.containerHeight);
          
          // 如果有SVG数据，执行自动缩放
          if (this.svgContent) {
            this.autoFitSvg();
          }
        }
      }).exec();
    },

    async loadProductDetail() {
      this.loading = true;
      try {
        const token = uni.getStorageSync('token');
        console.log('请求产品详情，URL:', `${config.baseURL}/productDetail/getByProductSNo/${this.productSNo}`);
        
        const res = await new Promise((resolve, reject) => {
          uni.request({
            url: `${config.baseURL}/productDetail/getByProductSNo/${this.productSNo}`,
            method: 'GET',
            header: {
              'Authorization': `Bearer ${token}`,
              'Content-Type': 'application/json'
            },
            success: (result) => {
              console.log('产品详情请求成功:', result);
              resolve(result);
            },
            fail: (error) => {
              console.error('产品详情请求失败:', error);
              reject(error);
            }
          });
        });

        console.log('产品详情响应:', res);
        
        if (res && res.statusCode === 200) {
          if (res.data && res.data.code === 0) {
            this.productDetail = res.data.data || {};
            console.log('产品详情数据:', this.productDetail);
            console.log('图片1 URL:', this.productDetail.image1Url);
            console.log('图片2 URL:', this.productDetail.image2Url);
          } else {
            console.error('业务错误:', res.data?.msg || '获取产品详情失败');
            uni.showToast({
              title: res.data?.msg || '获取产品详情失败',
              icon: 'none'
            });
          }
        } else {
          console.error('HTTP错误:', res.statusCode);
          uni.showToast({
            title: `HTTP错误: ${res.statusCode}`,
            icon: 'none'
          });
        }
      } catch (error) {
        console.error('加载产品详情异常:', error);
        uni.showToast({
          title: '加载失败: ' + (error.message || '未知错误'),
          icon: 'none'
        });
      } finally {
        this.loading = false;
      }
    },

    async loadSvgData() {
      this.loadingSvg = true;
      try {
        const token = uni.getStorageSync('token');
        const response = await new Promise((resolve, reject) => {
          uni.request({
            url: `${config.baseURL}/graphics/svg/${this.productSNo}`,
            method: 'GET',
            header: {
              'Authorization': `Bearer ${token}`,
              'Content-Type': 'application/json'
            },
            success: (result) => {
              console.log('SVG请求成功:', result);
              resolve(result);
            },
            fail: (error) => {
              console.error('SVG请求失败:', error);
              reject(error);
            }
          });
        });

        if (response && response.statusCode === 200) {
          // 存储Base64内容
          this.svgBase64Content = response.data;
          console.log('SVG Base64内容加载成功，长度:', response.data.length);
          
          // 解码并存储SVG内容
          try {
            this.svgContent = decodeURIComponent(escape(atob(response.data)));
            console.log('SVG内容解码成功');
            
            // 替换SVG中的变压器名称
            this.svgContent = this.replaceTransformerName(this.svgContent);
            console.log('SVG文本替换完成');
            
            // 解析SVG尺寸
            this.parseSvgDimensions(this.svgContent);
            
            // 延迟执行自动缩放，确保DOM已更新
            setTimeout(() => {
              this.getContainerWidth();
              // 延迟更新数据，确保SVG已渲染
              setTimeout(() => {
                this.updateAllData();
              }, 500);
            }, 100);
          } catch (decodeError) {
            console.error('SVG解码失败:', decodeError);
            this.svgContent = '';
          }
        } else {
          console.warn('未找到SVG数据，使用默认图');
          this.svgBase64Content = '';
          this.svgContent = '';
          // 设置默认尺寸
          this.svgWidth = 800;
          this.svgHeight = 300;
          // 即使没有SVG数据也尝试自动缩放默认图
          setTimeout(() => {
            this.getContainerWidth();
          }, 100);
        }
      } catch (error) {
        console.error('加载SVG异常:', error);
        uni.showToast({
          title: 'SVG加载失败',
          icon: 'none'
        });
        this.svgBase64Content = '';
        this.svgContent = '';
      } finally {
        this.loadingSvg = false;
      }
    },

    // 放大
    zoomIn() {
      this.scale = Math.min(this.scale + 0.2, 3); // 每次放大0.2倍
    },

    // 缩小
    zoomOut() {
      this.scale = Math.max(this.scale - 0.2, 0.2); // 最小缩小到0.2倍
    },

    // 重置缩放
    resetZoom() {
      this.scale = 1;
      this.scrollTop = 0;
      this.scrollLeft = 0;
    },

    // 新增：逆时针旋转90度
    rotateLeft() {
      this.rotationDeg = (this.rotationDeg - 90 + 360) % 360;
      // 旋转后可按需调整适配
      this.$nextTick(() => {
        // 可选：保持当前缩放不变，仅更新布局
        // this.autoFitSvg(); // 如果希望旋转后自适应填充，取消注释
      });
    },

    // 滚动事件处理
    onScroll(e) {
      const currentTime = Date.now();
      // 防止频繁触发
      if (currentTime - this.lastScrollTime > 16) {
        this.scrollTop = e.detail.scrollTop;
        this.scrollLeft = e.detail.scrollLeft;
        this.lastScrollTime = currentTime;
      }
    },

    showImagePreview(imageUrl) {
      console.log('点击预览图片:', imageUrl);
      if (imageUrl) {
        this.previewImage = imageUrl;
        this.showPreview = true;
      } else {
        uni.showToast({
          title: '暂无图片',
          icon: 'none'
        });
      }
    },

    closePreview() {
      this.showPreview = false;
      this.previewImage = '';
    },

    onImageError(imageIndex) {
      console.error(`图片${imageIndex}加载失败`);
      uni.showToast({
        title: `图片${imageIndex}加载失败`,
        icon: 'none'
      });
    },

    // 解析SVG尺寸
    parseSvgDimensions(svgContent) {
      try {
        // 提取width和height属性
        const widthMatch = svgContent.match(/width=["'](\d+(?:\.\d+)?)["']/);
        const heightMatch = svgContent.match(/height=["'](\d+(?:\.\d+)?)["']/);
        
        if (widthMatch && heightMatch) {
          this.svgWidth = parseFloat(widthMatch[1]);
          this.svgHeight = parseFloat(heightMatch[1]);
          console.log('解析到SVG尺寸:', this.svgWidth, 'x', this.svgHeight);
        }
      } catch (error) {
        console.error('解析SVG尺寸失败:', error);
      }
    },

    // 新增：开始数据轮询
    startDataPolling() {
      // 每10秒获取一次AI数据
      this.aiDataTimer = setInterval(() => {
        this.loadAiData();
      }, 10000);
      
      // 每10秒获取一次DI数据
      this.diDataTimer = setInterval(() => {
        this.loadDiData();
      }, 10000);
      
      // 立即获取一次数据
      this.loadAiData();
      this.loadDiData();
    },

    // 新增：停止数据轮询
    stopDataPolling() {
      if (this.aiDataTimer) {
        clearInterval(this.aiDataTimer);
        this.aiDataTimer = null;
      }
      if (this.diDataTimer) {
        clearInterval(this.diDataTimer);
        this.diDataTimer = null;
      }
    },

    // 新增：获取AI数据
    async loadAiData() {
      try {
        const token = uni.getStorageSync('token');
        const response = await new Promise((resolve, reject) => {
          uni.request({
            url: `${config.baseURL}/binding/getSceneBindingAiData/${this.productSNo}`,
            method: 'GET',
            header: {
              'Authorization': `Bearer ${token}`,
              'Content-Type': 'application/json'
            },
            success: (result) => {
              resolve(result);
            },
            fail: (error) => {
              reject(error);
            }
          });
        });

        if (response && response.statusCode === 200 && response.data) {
          this.aiDataList = response.data;
          this.updateAiData(); // 更新SVG中的AI数据
        }
      } catch (error) {
        console.error('获取AI数据失败:', error);
      }
    },

    // 新增：获取DI数据
    async loadDiData() {
      try {
        const token = uni.getStorageSync('token');
        const response = await new Promise((resolve, reject) => {
          uni.request({
            url: `${config.baseURL}/binding/getSceneBindingDiData/${this.productSNo}`,
            method: 'GET',
            header: {
              'Authorization': `Bearer ${token}`,
              'Content-Type': 'application/json'
            },
            success: (result) => {
              resolve(result);
            },
            fail: (error) => {
              reject(error);
            }
          });
        });

        if (response && response.statusCode === 200 && response.data) {
          this.diDataList = response.data;
          this.updateDiData(); // 更新SVG中的DI数据
        }
      } catch (error) {
        console.error('获取DI数据失败:', error);
      }
    },

    // 新增：更新所有数据
    updateAllData() {
      this.updateAiData();
      this.updateDiData();
      // 确保时间更新
      this.updateLatestTime();
    },

    // 新增：更新最新时间
    updateLatestTime() {
      let latestTime = '';
      
      // 从AI数据中获取最新时间
      if (this.aiDataList && this.aiDataList.length > 0) {
        this.aiDataList.forEach(item => {
          if (item.updateTime && (!latestTime || item.updateTime > latestTime)) {
            latestTime = item.updateTime;
          }
        });
      }
      
      // 从DI数据中获取最新时间
      if (this.diDataList && this.diDataList.length > 0) {
        this.diDataList.forEach(item => {
          if (item.updateTime && (!latestTime || item.updateTime > latestTime)) {
            latestTime = item.updateTime;
          }
        });
      }
      
      // 设置最新时间
      if (latestTime) {
        this.latestUpdateTime = latestTime;
        console.log('更新时间已更新:', this.latestUpdateTime);
      }
    },

    // 新增：更新AI数据到SVG
    updateAiData() {
      if (!this.svgContent || this.aiDataList.length === 0) return;
      
      console.log('AI数据更新:', this.aiDataList);
      
      // 更新最新时间
      this.updateLatestTime();
      
      // 处理每个AI数据项
      this.aiDataList.forEach(item => {
        try {
          // 格式化数值：parseFloat(currentValue).toFixed(precision)
          const formattedValue = item.currentValue ? 
            parseFloat(item.currentValue).toFixed(item.precision || 2) : 
            '--';
          
          console.log(`更新AI数据 - ID: ${item.svgId}, 值: ${formattedValue}`);
          
          // 更新SVG中的对应元素
          this.updateSvgElementText(item.svgId, formattedValue);
          
          // 如果有颜色设置，更新颜色
          if (item.color) {
            this.updateSvgElementColor(item.svgId, item.color);
          }
        } catch (error) {
          console.error(`更新AI数据失败 - ID: ${item.svgId}`, error);
        }
      });
    },

    // 新增：更新DI数据到SVG
    updateDiData() {
      if (!this.svgContent || this.diDataList.length === 0) return;
      
      console.log('DI数据更新:', this.diDataList);
      
      // 更新最新时间
      this.updateLatestTime();
      
      // 处理每个DI数据项
      this.diDataList.forEach(item => {
        try {
          console.log(`更新DI数据 - ID: ${item.svgId}, 当前值: ${item.currentValue}`);
          
          // 根据不同的renderType处理
          if (item.renderType === 'switchPosition') {
            this.updateSwitchElement(item.svgId, parseInt(item.currentValue) || 0);
          } else if (item.renderType === 'statusIndicator') {
            this.updateStatusElement(item.svgId, parseInt(item.currentValue) || 0, item);
          } else {
            // 默认处理：根据value0/value1设置文本
            const status = parseInt(item.currentValue) === 1 ? item.value1 : item.value0;
            if (status) {
              this.updateSvgElementText(item.svgId, status);
            }
          }
        } catch (error) {
          console.error(`更新DI数据失败 - ID: ${item.svgId}`, error);
        }
      });
    },

    // 新增：更新SVG元素文本内容
    updateSvgElementText(svgId, text) {
      try {
        // 等待DOM更新完成
        this.$nextTick(() => {
          // 通过ID查找SVG元素并更新文本
          const element = document.getElementById(svgId);
          if (element) {
            const tag = element.tagName ? element.tagName.toLowerCase() : '';

            // 如果是 <text> 元素，优先更新内部的 <tspan>，避免覆盖结构导致y/dy丢失而产生上移
            if (tag === 'text') {
              const tspans = element.getElementsByTagName('tspan');
              if (tspans && tspans.length > 0) {
                Array.from(tspans).forEach(t => { t.textContent = text; });
                console.log(`成功更新SVG tspan文本 - ID: ${svgId}, 文本: ${text}`);
                this.maybeScaleSvgText(svgId, element, text);
                return;
              }
              // 无 tspan 时再回退到直接设置文本
              element.textContent = text;
              console.log(`成功更新SVG文本元素 - ID: ${svgId}, 文本: ${text}`);
              this.maybeScaleSvgText(svgId, element, text);
              return;
            }

            // 如果是其他容器元素，优先找子级 tspan，再找 text
            const tspansInChildren = element.querySelectorAll('tspan');
            if (tspansInChildren && tspansInChildren.length > 0) {
              tspansInChildren.forEach(t => { t.textContent = text; });
              console.log(`成功更新子级tspan文本 - ID: ${svgId}, 文本: ${text}`);
              this.maybeScaleSvgText(svgId, element, text);
              return;
            }

            const textChildren = element.querySelectorAll('text');
            if (textChildren && textChildren.length > 0) {
              textChildren.forEach(txt => {
                const innerTspans = txt.querySelectorAll('tspan');
                if (innerTspans && innerTspans.length > 0) {
                  innerTspans.forEach(t => { t.textContent = text; });
                } else {
                  txt.textContent = text;
                }
              });
              console.log(`成功更新子级text文本 - ID: ${svgId}, 文本: ${text}`);
              this.maybeScaleSvgText(svgId, element, text);
            } else {
              console.warn(`未找到可更新的文本元素 - ID: ${svgId}`);
            }
          } else {
            console.warn(`未找到SVG元素 - ID: ${svgId}`);
          }
        });
      } catch (error) {
        console.error(`更新SVG元素文本失败 - ID: ${svgId}`, error);
      }
    },

    // 新增：如是数值文本，轻微缩小字体（仅缩小一次）
    maybeScaleSvgText(svgId, element, text) {
      try {
        // 仅对数值类文本或以 value_/rated_capacity/transformer_capacity 开头的ID进行缩放
        const isNumericLike = /\d/.test(String(text || ''));
        const isValueId = /^(value_|rated_capacity_|transformer_capacity_)/.test(svgId || '');
        if (!isNumericLike && !isValueId) return;
        if (this.fontScaledIds[svgId]) return; // 已缩放过

        // 找到要设置字体大小的 <text> 元素
        let targetTextEl = null;
        const tag = element.tagName ? element.tagName.toLowerCase() : '';
        if (tag === 'text') {
          targetTextEl = element;
        } else {
          targetTextEl = element.querySelector('text') || element;
        }
        if (!targetTextEl) return;

        // 读取现有字体大小
        let currentSize = 0;
        const attrSize = targetTextEl.getAttribute('font-size');
        if (attrSize) {
          currentSize = parseFloat(attrSize);
        }
        if (!currentSize && window && window.getComputedStyle) {
          const cs = window.getComputedStyle(targetTextEl);
          if (cs && cs.fontSize) {
            const parsed = parseFloat(cs.fontSize);
            if (!isNaN(parsed)) currentSize = parsed;
          }
        }
        if (!currentSize || isNaN(currentSize)) {
          currentSize = 16; // 合理默认
        }

        // 计算新字号，缩小10%
        const newSize = Math.max(10, Math.round(currentSize * 0.9 * 100) / 100);
        targetTextEl.setAttribute('font-size', String(newSize));

        // 同步子级tspan（若父未影响子）
        const tspans = targetTextEl.querySelectorAll ? targetTextEl.querySelectorAll('tspan') : [];
        if (tspans && tspans.length > 0) {
          tspans.forEach(t => t.setAttribute('font-size', String(newSize)));
        }

        this.fontScaledIds[svgId] = { original: currentSize, scaled: newSize };
        console.log(`已缩小字体 - ID: ${svgId}, ${currentSize} -> ${newSize}`);
      } catch (e) {
        console.warn('缩小字体失败', svgId, e);
      }
    },

    // 新增：更新SVG元素颜色
    updateSvgElementColor(svgId, color) {
      try {
        this.$nextTick(() => {
          const element = document.getElementById(svgId);
          if (element) {
            // 更新可填充元素的颜色
            const fillableTags = ['rect', 'circle', 'path', 'polygon', 'ellipse', 'line'];
            const tagName = element.tagName ? element.tagName.toLowerCase() : '';
            
            if (fillableTags.includes(tagName)) {
              element.setAttribute('fill', color);
              console.log(`成功更新SVG元素颜色 - ID: ${svgId}, 颜色: ${color}`);
            } else {
              // 查找子元素
              const fillableElements = element.querySelectorAll(fillableTags.join(', '));
              if (fillableElements.length > 0) {
                fillableElements.forEach(el => {
                  el.setAttribute('fill', color);
                });
                console.log(`成功更新SVG子元素颜色 - ID: ${svgId}, 颜色: ${color}`);
              } else {
                // 尝试更新所有子元素的fill属性
                const allElements = element.querySelectorAll('*');
                let updated = false;
                allElements.forEach(el => {
                  if (el.hasAttribute('fill')) {
                    el.setAttribute('fill', color);
                    updated = true;
                  }
                });
                if (updated) {
                  console.log(`成功更新SVG元素fill属性 - ID: ${svgId}, 颜色: ${color}`);
                } else {
                  console.warn(`未找到可更新颜色的元素 - ID: ${svgId}`);
                }
              }
            }
          } else {
            console.warn(`未找到SVG元素 - ID: ${svgId}`);
          }
        });
      } catch (error) {
        console.error(`更新SVG元素颜色失败 - ID: ${svgId}`, error);
      }
    },

    // 新增：更新开关元素状态
    updateSwitchElement(svgId, value) {
      try {
        this.$nextTick(() => {
          const element = document.getElementById(svgId);
          if (element) {
            if (value === 1) {
              // 闭合状态 - 绿色
              this.setElementColor(element, '#52c41a');
              console.log(`开关元素闭合 - ID: ${svgId}`);
            } else {
              // 断开状态 - 红色
              this.setElementColor(element, '#ff4d4f');
              console.log(`开关元素断开 - ID: ${svgId}`);
            }
          } else {
            console.warn(`未找到开关元素 - ID: ${svgId}`);
          }
        });
      } catch (error) {
        console.error(`更新开关元素失败 - ID: ${svgId}`, error);
      }
    },

    // 新增：更新状态指示元素
    updateStatusElement(svgId, value, item) {
      try {
        this.$nextTick(() => {
          const element = document.getElementById(svgId);
          if (element) {
            // 根据value0/value1设置颜色
            const color = value === 1 ? (item.value1 || '#52c41a') : (item.value0 || '#ff4d4f');
            this.setElementColor(element, color);
            console.log(`成功更新状态元素 - ID: ${svgId}, 值: ${value}, 颜色: ${color}`);
          } else {
            console.warn(`未找到状态元素 - ID: ${svgId}`);
          }
        });
      } catch (error) {
        console.error(`更新状态元素失败 - ID: ${svgId}`, error);
      }
    },

    // 辅助方法：设置元素颜色
    setElementColor(element, color) {
      const fillableTags = ['rect', 'circle', 'path', 'polygon', 'ellipse', 'line'];
      const tagName = element.tagName ? element.tagName.toLowerCase() : '';
      
      if (fillableTags.includes(tagName)) {
        element.setAttribute('fill', color);
      } else {
        // 查找所有可填充的子元素
        const fillableElements = element.querySelectorAll(fillableTags.join(', '));
        fillableElements.forEach(el => {
          el.setAttribute('fill', color);
        });
        
        // 如果没有找到可填充元素，尝试更新stroke
        if (fillableElements.length === 0) {
          const strokableElements = element.querySelectorAll('line, path, polygon, polyline');
          strokableElements.forEach(el => {
            el.setAttribute('stroke', color);
          });
        }
      }
    },
    
        // 替换SVG中的变压器名称、额定容量、线路名称和变压器容量
    replaceTransformerName(svgContent) {
      console.log('=== 开始SVG文本替换调试 ===');
      console.log('输入SVG内容长度:', svgContent ? svgContent.length : 'null');
      console.log('productDetail对象:', JSON.stringify(this.productDetail, null, 2));
      
      if (!svgContent || !this.productDetail) {
        console.log('❌ 输入验证失败 - svgContent:', !!svgContent, 'productDetail:', !!this.productDetail);
        return svgContent;
      }
      
      try {
        let processedSvg = svgContent;
        let hasChanges = false;
        
        // 1. 替换线路名称 (line_name) - 通过ID直接替换
        let lineName = this.productDetail.line10kvName;
        console.log('🔍 线路名称配置值:', lineName, '类型:', typeof lineName);
        
        if (!lineName || lineName.trim() === '') {
          lineName = ''; // 如果没有配置，置为空
          console.log('⚠️ 线路名称为空，将置为空字符串');
        }
        
        console.log('🎯 开始替换SVG中的线路名称，目标名称:', lineName);
        
        // 直接通过ID替换整个text元素中的tspan内容
        const lineNamePattern = /<text id="line_name"[^>]*>(\s*<tspan[^>]*>)[^<]*(<\/tspan>\s*)<\/text>/g;
        const beforeReplace = processedSvg;
        processedSvg = processedSvg.replace(lineNamePattern, (match, p1, p2) => {
          console.log('🔍 找到line_name元素，准备替换');
          return `<text id="line_name" fill="white" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="16" font-style="italic" font-weight="bold" letter-spacing="0em">${p1}${lineName}${p2}</text>`;
        });
        
        if (processedSvg !== beforeReplace) {
          console.log('✅ 线路名称替换成功');
          hasChanges = true;
        } else {
          console.log('❌ 线路名称替换失败，未找到line_name元素');
        }
        
        // 2. 替换变压器名称 (transformer_name) - 通过ID直接替换
        let transformerName = this.productDetail.transformerName;
        console.log('🔍 变压器名称配置值:', transformerName, '类型:', typeof transformerName);
        
        if (!transformerName || transformerName.trim() === '') {
          transformerName = ''; // 如果没有配置，置为空
          console.log('⚠️ 变压器名称为空，将置为空字符串');
        }
        
        console.log('🎯 开始替换SVG中的变压器名称，目标名称:', transformerName);
        
        // 直接通过ID替换整个text元素中的tspan内容
        const transformerNamePattern = /<text id="transformer_name"[^>]*>(\s*<tspan[^>]*>)[^<]*(<\/tspan>\s*)<\/text>/g;
        const beforeReplace2 = processedSvg;
        processedSvg = processedSvg.replace(transformerNamePattern, (match, p1, p2) => {
          console.log('🔍 找到transformer_name元素，准备替换');
          return `<text id="transformer_name" fill="white" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="16" font-style="italic" font-weight="bold" letter-spacing="0em">${p1}${transformerName}${p2}</text>`;
        });
        
        if (processedSvg !== beforeReplace2) {
          console.log('✅ 变压器名称替换成功');
          hasChanges = true;
        } else {
          console.log('❌ 变压器名称替换失败，未找到transformer_name元素');
        }
        
        // 3. 替换变压器容量 (transformer_capacity_1) - 通过ID直接替换
        let transformerCapacity = this.productDetail.transformerRatedCapacity;
        console.log('🔍 变压器容量配置值:', transformerCapacity, '类型:', typeof transformerCapacity);
        
        if (!transformerCapacity || transformerCapacity <= 0) {
          transformerCapacity = ''; // 如果没有配置，置为空
          console.log('⚠️ 变压器容量为空，将置为空字符串');
        }
        
        console.log('🎯 开始替换SVG中的变压器容量，目标容量:', transformerCapacity);
        
        if (transformerCapacity && transformerCapacity !== '') {
          // 有额定容量，替换整个text元素
          const capacityText = `容量:${transformerCapacity} kVA`;
          console.log('🔍 准备替换为:', capacityText);
          
          const capacityPattern = /<text id="transformer_capacity_1"[^>]*>(\s*<tspan[^>]*>)[^<]*(<\/tspan>\s*)<\/text>/g;
          const beforeReplace3 = processedSvg;
          processedSvg = processedSvg.replace(capacityPattern, (match, p1, p2) => {
            console.log('🔍 找到transformer_capacity_1元素，准备替换');
            return `<text id="transformer_capacity_1" fill="white" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="16" font-style="italic" font-weight="bold" letter-spacing="0em">${p1}${capacityText}${p2}</text>`;
          });
          
          if (processedSvg !== beforeReplace3) {
            console.log('✅ 变压器容量替换成功');
            hasChanges = true;
          } else {
            console.log('❌ 变压器容量替换失败，未找到transformer_capacity_1元素');
          }
          
        } else {
          // 没有额定容量，删除整个text元素
          console.log('⚠️ 变压器容量为空，将删除整个容量显示元素');
          
          const deleteCapacityPattern = /<text id="transformer_capacity_1"[^>]*>(\s*<tspan[^>]*>)[^<]*(<\/tspan>\s*)<\/text>/g;
          const beforeReplace3 = processedSvg;
          processedSvg = processedSvg.replace(deleteCapacityPattern, '');
          
          if (processedSvg !== beforeReplace3) {
            console.log('✅ 变压器容量元素删除成功');
            hasChanges = true;
          } else {
            console.log('❌ 变压器容量元素删除失败，未找到transformer_capacity_1元素');
          }
        }
        
        // 4. 替换出线名称和容量
        console.log('🎯 开始替换SVG中的出线名称和容量');
        
        // 遍历1-8个出线
        for (let i = 1; i <= 8; i++) {
          // 4.1 替换出线名称（k01, k02, k03...）
          const lineName = this.productDetail[`line${i}Name`];
          if (lineName && lineName.trim() !== '') {
            console.log(`🔍 出线${i}名称: ${lineName}`);
            
            // 通过ID直接替换整个text元素中的tspan内容
            // 支持ID为 k07 或 k7 两种格式，因此对前导0使用可选匹配
            const lineNamePattern = new RegExp(`<text id="k0?${i}"[^>]*>(\\s*<tspan[^>]*>)[^<]*(<\\/tspan>\\s*)<\\/text>`, 'g');
            const beforeReplace = processedSvg;
            processedSvg = processedSvg.replace(lineNamePattern, (match, p1, p2) => {
              console.log(`🔍 找到k0${i}元素，准备替换为: ${lineName}`);
              return `<text id="k0${i}" fill="white" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="18" font-style="italic" font-weight="bold" letter-spacing="0em">${p1}${lineName}${p2}</text>`;
            });
            
            if (processedSvg !== beforeReplace) {
              console.log(`✅ 出线${i}名称替换成功: k0${i} -> ${lineName}`);
              hasChanges = true;
            } else {
              console.log(`❌ 出线${i}名称替换失败，未找到k0${i}元素`);
            }
          }
          
          // 4.2 替换出线额定容量
          const lineRatedCapacity = this.productDetail[`line${i}RatedCapacity`];
          if (lineRatedCapacity && lineRatedCapacity > 0) {
            console.log(`🔍 出线${i}额定容量: ${lineRatedCapacity}`);
            
            // 构建容量文本，加上单位A
            const capacityText = `容量:${lineRatedCapacity} A`;
            console.log(`🔍 准备替换为: ${capacityText}`);
            
            // 通过ID直接替换整个text元素中的tspan内容
            // 支持ID为 rated_capacity_7 或 rated_capacity_07 两种格式
            const capacityPattern = new RegExp(`<text id="rated_capacity_0?${i}"[^>]*>(\\s*<tspan[^>]*>)[^<]*(<\\/tspan>\\s*)<\\/text>`, 'g');
            const beforeReplace = processedSvg;
            processedSvg = processedSvg.replace(capacityPattern, (match, p1, p2) => {
              console.log(`🔍 找到rated_capacity_${i}元素，准备替换为: ${capacityText}`);
              return `<text id="rated_capacity_${i}" fill="white" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="15" font-style="italic" font-weight="bold" letter-spacing="0em">${p1}${capacityText}${p2}</text>`;
            });
            
            if (processedSvg !== beforeReplace) {
              console.log(`✅ 出线${i}额定容量替换成功: ${capacityText}`);
              hasChanges = true;
            } else {
              console.log(`❌ 出线${i}额定容量替换失败，未找到rated_capacity_${i}元素`);
            }
            
          } else {
            // 没有额定容量，删除整个text元素
            console.log(`⚠️ 出线${i}额定容量为空，将删除整个容量显示元素`);
            
            const deleteCapacityPattern = new RegExp(`<text id="rated_capacity_0?${i}"[^>]*>(\\s*<tspan[^>]*>)[^<]*(<\\/tspan>\\s*)<\\/text>`, 'g');
            const beforeReplace = processedSvg;
            processedSvg = processedSvg.replace(deleteCapacityPattern, '');
            
            if (processedSvg !== beforeReplace) {
              console.log(`✅ 出线${i}容量元素删除成功`);
              hasChanges = true;
            } else {
              console.log(`❌ 出线${i}容量元素删除失败，未找到rated_capacity_${i}元素`);
            }
          }
        }
        
        // 输出调试信息
        console.log('=== SVG替换结果总结 ===');
        if (hasChanges) {
          console.log('✅ SVG内容替换完成，有内容被修改');
        } else {
          console.log('❌ SVG内容未发生任何变化');
        }
        
        // 显示SVG内容预览，帮助调试
        console.log('🔍 SVG内容预览（前1000字符）:');
        console.log(svgContent.substring(0, Math.min(1000, svgContent.length)));
        
        // 检查是否包含我们期望的文本
        const expectedTexts = ['10kV aaa线', 'XXX配电变压器', '容量:YYY kVA'];
        expectedTexts.forEach(text => {
          const exists = svgContent.includes(text);
          console.log(`🔍 SVG中是否包含"${text}": ${exists ? '✅' : '❌'}`);
        });
        
        // 检查SVG中实际包含的文本模式
        console.log('🔍 分析SVG中的实际文本内容...');
        const textMatches = svgContent.match(/<tspan[^>]*>([^<]*)<\/tspan>/g);
        if (textMatches) {
          console.log('🔍 找到的tspan标签内容:');
          textMatches.slice(0, 10).forEach((match, index) => {
            console.log(`  ${index + 1}. ${match}`);
          });
        }
        
        console.log('=== SVG替换调试结束 ===');
        
        return processedSvg;
        
      } catch (error) {
        console.error('SVG文本替换异常:', error);
        // 如果替换失败，返回原始SVG
        return svgContent;
      }
    }
  }
};
</script>

<style scoped>
.diagram-container {
  min-height: 100vh;
  background-color: #f8f9fa;
  position: relative;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100rpx;
  padding: 0 30rpx;
  background-color: #2980ff;
  color: #fff;
  box-sizing: border-box;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.nav-left {
  display: flex;
  align-items: center;
  font-size: 28rpx;
}

.back-icon {
  margin-right: 10rpx;
  font-size: 32rpx;
}

.title {
  font-size: 36rpx;
  font-weight: 500;
}

.nav-right {
  width: 60rpx;
}

.device-info {
  background-color: #fff;
  padding: 20rpx 30rpx;
  margin: 0 20rpx 20rpx;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.info-item {
  display: flex;
  align-items: center;
}

.info-label {
  font-size: 28rpx;
  color: #666;
  margin-right: 10rpx;
}

.info-value {
  font-size: 28rpx;
  color: #2980ff;
  font-weight: 500;
}

.main-content {
  display: flex;
  flex-direction: column;
  padding: 20rpx;
  height: calc(100vh - 200rpx); /* 调整高度以适应设备信息区域 */
  box-sizing: border-box;
  gap: 15rpx; /* 减少间距 */
}

/* SVG完整容器 */
.svg-full-container {
  flex: 1;
  position: relative;
  background-color: #fff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* 更新时间显示样式 */
.update-time-display {
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  z-index: 100;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(10rpx);
  border-radius: 20rpx;
  padding: 15rpx 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.3);
  border: 1rpx solid rgba(255, 255, 255, 0.2);
  min-width: 200rpx;
}

.update-time-label {
  color: #fff;
  font-size: 24rpx;
  font-weight: 500;
  margin-bottom: 8rpx;
  opacity: 0.9;
}

.update-time-value {
  color: #00ff88;
  font-size: 28rpx;
  font-weight: bold;
  font-family: 'Courier New', monospace;
  text-shadow: 0 0 10rpx rgba(0, 255, 136, 0.5);
}

/* 透明工具栏 */
.svg-toolbar-transparent {
  position: absolute;
  top: 20rpx;
  left: 20rpx;
  z-index: 100;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(10rpx);
  border-radius: 30rpx;
  padding: 15rpx 20rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
  border: 1rpx solid rgba(255, 255, 255, 0.1);
}

.toolbar-group {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.zoom-controls {
  display: flex;
  gap: 15rpx;
}

.zoom-btn {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.2);
  background: rgba(255, 255, 255, 0.9);
  color: #333;
}

.zoom-btn:active {
  transform: scale(0.95);
  box-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.3);
}

.icon-plus, .icon-minus, .icon-reset {
  font-size: 36rpx;
}

.zoom-text {
  color: #fff;
  font-size: 28rpx;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.2);
  padding: 10rpx 20rpx;
  border-radius: 20rpx;
  backdrop-filter: blur(10rpx);
  border: 1rpx solid rgba(255, 255, 255, 0.1);
}

/* SVG滚动容器 - 墨绿色背景 */
.svg-scroll-container {
  flex: 1;
  width: 100%;
  background-color: #000000; /* 墨绿色 */
  padding: 20rpx;
  box-sizing: border-box;
}

.svg-content-wrapper {
  background-color: #000000; /* 墨绿色背景 */
  overflow: visible;
}

.dynamic-svg-container {
  display: inline-block;
  border-radius: 8rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.3);
  max-width: 100%;
  max-height: 100%;
}

.loading-svg {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #000000; /* 墨绿色 */
  color: #fff;
  font-size: 28rpx;
  gap: 20rpx;
  min-height: 400rpx;
}

.loading-spinner {
  width: 60rpx;
  height: 60rpx;
  border: 4rpx solid rgba(255, 255, 255, 0.3);
  border-top: 4rpx solid #fff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-text {
  color: #fff;
  font-size: 28rpx;
}

.default-svg {
  width: 100%;
  height: 100%;
  background-color: #006400; /* 墨绿色 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20rpx;
  padding: 20rpx;
  box-sizing: border-box;
  min-height: 400rpx;
  color: #fff;
}

.default-svg >>> svg {
  max-width: 100%;
  max-height: 70%;
  object-fit: contain;
}

.no-data-text {
  color: #fff;
  font-size: 28rpx;
  margin-top: 20rpx;
}

/* 底部按钮区域 */
.bottom-section {
  flex: none;
  display: flex;
  gap: 15rpx; /* 减少按钮间距 */
  height: 80rpx; /* 减少高度 */
  min-height: 80rpx;
  align-items: center;
  justify-content: center;
  padding: 0 20rpx; /* 添加水平内边距 */
  box-sizing: border-box;
}

.image-button {
  flex: 1;
  height: 60rpx; /* 减少按钮高度 */
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 30rpx; /* 减少圆角 */
  font-size: 28rpx; /* 减少字体大小 */
  font-weight: 500;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2); /* 减少阴影 */
  transition: all 0.3s ease;
  margin: 0 10rpx; /* 添加水平外边距 */
}

.image-button:active {
  transform: scale(0.95);
  box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.3);
}

.image-button:after {
  border: none;
}

.preview-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.preview-content {
  position: relative;
  width: 90%;
  height: 80%;
  background-color: #fff;
  border-radius: 16rpx;
  display: flex;
  flex-direction: column;
  padding: 20rpx;
  box-sizing: border-box;
}

.preview-image {
  flex: 1;
  width: 100%;
  height: calc(100% - 80rpx);
  border-radius: 8rpx;
  object-fit: contain;
}

.close-btn {
  align-self: center;
  width: 200rpx;
  height: 70rpx;
  line-height: 70rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  font-size: 32rpx;
  border-radius: 35rpx;
  border: none;
  margin-top: 20rpx;
  font-weight: 500;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
}

.close-btn:active {
  transform: scale(0.98);
}

.icon-fit {
  font-size: 24rpx;
  font-weight: bold;
}

@media screen and (max-width: 768px) {
  .bottom-section {
    height: 70rpx; /* 移动端更小的高度 */
  }
  
  .svg-toolbar-transparent {
    top: 15rpx;
    left: 15rpx;
    padding: 12rpx 16rpx;
  }
  
  .zoom-btn {
    width: 50rpx;
    height: 50rpx;
    font-size: 28rpx;
  }
  
  .icon-plus, .icon-minus, .icon-reset {
    font-size: 32rpx;
  }
  
  .zoom-text {
    font-size: 24rpx;
    padding: 8rpx 16rpx;
  }
  
  .svg-scroll-container {
    padding: 15rpx;
  }
  
  .image-button {
    height: 50rpx; /* 移动端更小的按钮 */
    font-size: 24rpx;
    border-radius: 25rpx;
  }
  
  .main-content {
    height: calc(100vh - 120rpx); /* 移动端调整高度 */
    gap: 10rpx;
  }
  
  /* 移动端时间显示样式调整 */
  .update-time-display {
    top: 15rpx;
    right: 15rpx;
    padding: 12rpx 16rpx;
    min-width: 180rpx;
  }
  
  .update-time-label {
    font-size: 22rpx;
    margin-bottom: 6rpx;
  }
  
  .update-time-value {
    font-size: 26rpx;
  }
}
</style>